<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="../common.css" />
	<style type="text/css">
		body {
			background: #222;
		}

		.btn {
			width: 300px;
			height: 70px;
			position: relative;
			overflow: hidden;
			/* 动画的关键之一，使渐变背景仅显示需要的那一部分 */
			border-radius: 4px;
			box-shadow: 0 10px 15px rgba(0, 0, 0, .7);
			color: #000;
			font-size: 16px;
			padding: 20px;
			z-index: 11;
			cursor: default;
			/* cursor:no-drop; 禁止*/
			/* cursor: not-allowed; */
			-moz-user-select: none;
			/* Firefox私有属性 */
			-webkit-user-select: none;
			/* WebKit内核私有属性 */
			-ms-user-select: none;
			/* IE私有属性(IE10及以后) */
			-khtml-user-select: none;
			/* KHTML内核私有属性 */
			-o-user-select: none;
			/* Opera私有属性 */
			user-select: none;
			/* CSS3属性 */
			/* user-select的默认值是 text：可以选择文本none：文本不被选择 */
		}

		.btn::before {
			content: "";
			position: absolute;
			width: 310px;
			/* height: 110%; 半线*/
			height: 450%;
			background-image: linear-gradient(45deg, #51f4fa 35%, #da7efc 60%);
			animation: rotate 5s linear infinite 0s;
			z-index: -1;
		}

		.btn::after {
			content: "";
			position: absolute;
			top: 3px;
			bottom: 3px;
			left: 3px;
			right: 3px;
			background: #fff;
			border-radius: 3px;
			z-index: -1;
		}

		@keyframes rotate {
			0% {
				transform: rotate(0deg);
			}

			100% {
				transform: rotate(355deg);
			}
		}

		.text {
			position: relative;
			z-index: 12;
			color: orange;
			width: 100%;
			height: 100%;
			justify-content: center;
		}

		.text::before {
			display: block;
			color: #222;
			font-size: 1.5em;
			margin-block-start: 0.83em;
			margin-block-end: 0.83em;
			margin-inline-start: 0px;
			margin-inline-end: 0px;
			font-weight: bold;
			content: attr(data-text);
			opacity: 1;
			position: absolute;
			-webkit-transition: all 2s cubic-bezier(0.75, 0, 0.125, 1) 0s;
			-ms-transition: all 2s cubic-bezier(0.75, 0, 0.125, 1) 0s;
			-moz-transition: all 2s cubic-bezier(0.75, 0, 0.125, 1) 0s;
			transition: all 2s cubic-bezier(0.75, 0, 0.125, 1) 0s;
		}

		.text:hover::before {
			opacity: 0;
			transform: translateY(100%);
		}

		.text>h2 {
			opacity: 0;
			-webkit-transition: all 4s cubic-bezier(0.75, 0, 0.125, 1) 0s;
			-ms-transition: all 4s cubic-bezier(0.75, 0, 0.125, 1) 0s;
			-moz-transition: all 4s cubic-bezier(0.75, 0, 0.125, 1) 0s;
			transition: all 4s cubic-bezier(0.75, 0, 0.125, 1) 0s;
		}

		.text:hover>h2 {
			opacity: 1;
		}

		.text:hover>h2:nth-child(1) {
			transition-delay: 0.1s;
		}

		.text:hover>h2:nth-child(2) {
			transition-delay: 0.2s;
		}

		.text:hover>h2:nth-child(3) {
			transition-delay: 0.3s;
		}

		.text:hover>h2:nth-child(4) {
			transition-delay: 0.4s;
		}

		.text:hover>h2:nth-child(5) {
			transition-delay: 0.5s;
		}

		.text:hover>h2:nth-child(6) {
			transition-delay: 0.6s;
		}

		.text:hover>h2:nth-child(7) {
			transition-delay: 0.7s;
		}

		.text:hover>h2:nth-child(8) {
			transition-delay: 0.8s;
		}

		.text:hover>h2:nth-child(9) {
			transition-delay: 0.9s;
		}

		.text:hover>h2:nth-child(10) {
			transition-delay: 1s;
		}

		.text:hover>h2:nth-child(11) {
			transition-delay: 1.1s;
		}

		.text:hover>h2:nth-child(12) {
			transition-delay: 1.1s;
		}


		.bubble .b-1 {
			width: 6px;
			height: 6px;
			background-color: pink;
			border-radius: 50%;
			animation: bubble1 7s linear infinite;
		}

		.bubble .b-2 {
			width: 8px;
			height: 8px;
			background-color: pink;
			border-radius: 50%;
			animation: bubble2 5s linear infinite;
		}

		.bubble .b-3 {
			width: 12px;
			height: 12px;
			border-radius: 50%;
			background-color: pink;
			animation: bubble1 4s linear infinite;
		}

		.bubble .b-4 {
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background-color: pink;
			animation: bubble2 5s linear infinite;
		}

		.bubble .b-5 {
			width: 6px;
			height: 6px;
			background-color: pink;
			border-radius: 50%;
			animation: bubble2 7s linear infinite;
		}

		.bubble .b-6 {
			width: 12px;
			border-radius: 50%;
			height: 12px;
			background-color: pink;
			animation: bubble1 6s linear infinite;
		}

		@keyframes bubble1 {
			0% {
				opacity: 0;
				transform: translate(0px, 0) scale(.8);
			}

			50% {
				opacity: 1;
				transform: translate(10px, -20px) scale(1.1);
			}

			100% {
				opacity: 0;
				transform: translate(5px, -50px) scale(.9);
			}
		}

		@keyframes bubble2 {
			0% {
				opacity: 0;
				transform: translate(0px, 0) scale(.8);
			}

			50% {
				opacity: 1;
				transform: translate(3px, -20px) scale(1.1);
			}

			100% {
				opacity: 0;
				transform: translate(5px, -50px) scale(.9);
			}
		}
	</style>
	<body>

		<div class="btn flex-row j_c">
			<ul class="bubble">
				<li class="b-1"></li>
				<li class="b-2"></li>
				<li class="b-3"></li>
				<li class="b-4"></li>
				<li class="b-5"></li>
				<li class="b-6"></li>
			</ul>
			<div class="flex-row text" data-text="susu welcome">
				<h2>s</h2>
				<h2>u</h2>
				<h2>s</h2>
				<h2>u</h2>
				<h2>&nbsp;</h2>
				<h2>w</h2>
				<h2>e</h2>
				<h2>l</h2>
				<h2>c</h2>
				<h2>o</h2>
				<h2>m</h2>
				<h2>e</h2>
			</div>

		</div>
	</body>
</html>
